<template>
	<view class="p20" style="background-color: #f8f8f8;height: 100vh;">
		<view class="fs32">
			联系方式
		</view>
		<input type="number" placeholder="请输入手机号" v-model="mobile">
		<view class="fs32 mt30">
			订单号(选填)
		</view>
		<input type="number" placeholder="请输入订单号" v-model="va_sn">
		<view class="fs32 mt30">
			问题描述(选填)
		</view>
		<view class="" style="background-color: #fff;">
			<textarea name="" placeholder="请输入您的问题" id="" cols="30" rows="10" maxlength="100"
				v-model="content"></textarea>
			<view class="fs26 c6 p30" style="text-align: right;">
				{{content.length}}/100
			</view>
		</view>
		<view class="submit" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: "",
				va_sn: "",
				content: "",
				type: ""
			}
		},
		onLoad(option) {
			this.type = option.type
		},
		methods: {
			submit() {
				if (this.mobile == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					});
					return false
				}
				this.api.post('user/feedback', {
					mobile: this.mobile,
					va_sn: this.va_sn,
					content: this.content,
					type: this.type
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						uni.showToast({
							title: '已投诉',
							icon: "none"
						});
						setTimeout(function() {
							uni.navigateBack(1)
						}, 800)
					}
				})
			},
		}
	}
</script>

<style>
	.submit {
		width: 100%;
		height: 110rpx;
		background-color: #2785fe;
		border-radius: 12rpx;
		font-size: 32rpx;
		color: #fff;
		line-height: 110rpx;
		text-align: center;
		margin: 160rpx auto 0;
	}

	textarea {
		margin: 20rpx auto 0;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
	}

	input {
		height: 110rpx;
		line-height: 110rpx;
		margin: 20rpx auto 0;
		width: 100%;
		box-sizing: border-box;
		height: 110rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 0 30rpx;
	}
</style>